<template>
    <div class="succees">
        <SearchBar class="form" @onSearch="handleSearch" @childFn="resetForm">
            <SearchBarItem label="子订单号：" :labelLg="8">
                <Input
                    type="text"
                    v-model="searchModule.subOrderId"
                    placeholder="请输入"
                    clearable
                />
            </SearchBarItem>
            <SearchBarItem label="主订单号：" :labelLg="8">
                <Input
                    type="text"
                    v-model="searchModule.orderId"
                    placeholder="请输入"
                    clearable
                />
            </SearchBarItem>
            <SearchBarItem label="商户名称：" :labelLg="8">
                <Input
                    type="text"
                    v-model="searchModule.merchantName"
                    placeholder="请输入"
                    clearable
                />
            </SearchBarItem>
            <SearchBarItem label="商品类型：" :labelLg="8">
                <Select
                    v-model="searchModule.orderSource"
                    placeholder="请选择"
                    :clearable="isClear"
                >
                    <Option
                        :value="item.key"
                        v-for="(item, key) in selectSource"
                        :key="key"
                        >{{ item.value }}</Option
                    >
                </Select>
            </SearchBarItem>
            <SearchBarItem label="是否有异常：" :labelLg="8">
                <Select
                    v-model="searchModule.isException"
                    placeholder="请选择"
                    :clearable="isClear"
                >
                    <Option
                        :value="item.key"
                        v-for="(item, key) in selectException"
                        :key="key"
                        >{{ item.value }}</Option
                    >
                </Select>
            </SearchBarItem>
            <SearchBarItem label="交易时间：" :labelLg="8">
                <DatePicker
                    type="daterange"
                    class="timeWidth"
                    ref="createDatePicker1"
                    :value="searchModule.dataTime"
                    split-panels
                    transfer
                    placeholder="请选择"
                    @on-change="searchTime"
                ></DatePicker>
            </SearchBarItem>
            <SearchBarItem label="核销时间：" :labelLg="8">
                <DatePicker
                    type="daterange"
                    class="timeWidth"
                    ref="createDatePicker2"
                    :value="searchModule.verificationTime"
                    split-panels
                    transfer
                    placeholder="请选择"
                    @on-change="searchVerificationTime"
                ></DatePicker>
            </SearchBarItem>
            <SearchBarItem label="清分时间：" :labelLg="8">
                <DatePicker
                    type="daterange"
                    class="timeWidth"
                    ref="createDatePicker3"
                    :value="searchModule.rectifyTime"
                    split-panels
                    transfer
                    placeholder="请选择"
                    @on-change="searchRectifyTime"
                ></DatePicker>
            </SearchBarItem>
            <SearchBarItem label="对账时间：" :labelLg="8">
                <DatePicker
                    type="daterange"
                    class="timeWidth"
                    ref="createDatePicker4"
                    :value="searchModule.rectifyTime"
                    split-panels
                    transfer
                    placeholder="请选择"
                    @on-change="searchRectify"
                ></DatePicker>
            </SearchBarItem>
        </SearchBar>
        <RemoteTable
            :namespace="namespace"
            :columns="columns"
            :showPageInfo="false"
            @onSortChange="onSortChange"
            :isFixedHeader="true"
            :selected="batchData"
            @onSelectionChange="getListChecked"
            ref="tableData"
        >
          <template #extra>
            <Authc permissions="trade:settlement:cmb">
              <Button type="primary" @click="exportExcel">导出</Button>
            </Authc>
            <Authc permissions="trade:settlement:cmb">
              <Button type="primary" @click="exportExcelAll">全部导出</Button>
            </Authc>
          </template>

        </RemoteTable>
        <div class="loadMoreBtn">
            <Button
                type="primary"
                @click="loadMore"
                :disabled="isDisabledloadBtn"
                >加载更多</Button
            >
        </div>
    </div>
</template>
<script>
import {
    Button,
    Input,
    Modal,
    Message,
    Col,
    Row,
    Form,
    FormItem,
    DatePicker,
    Select,
    Option,
    Card,
    Tabs,
    TabPane
} from "view-design";
import RemoteTable from "@/components/RemoteTable";
import SearchBar from "@/components/SearchBar";
import RemoteSelect from "@/components/RemoteSelect";
import { namespace } from "../Module/succeedBillModule";
import Authc from "@/components/Authc";
import Tables from "@/components/tables";
import Action from "./Action";
import config from "@/utils/config";
import appService from "@/utils/appService";
import util from '@/utils/util';

export default {
    name: "clearingAbnormal",
    components: {
        RemoteTable,
        SearchBar,
        SearchBarItem: SearchBar.SearchBarItem,
        RemoteSelect,
        Authc,
        Action,
        Tables,
        Button,
        Input,
        Modal,
        Message,
        Col,
        Row,
        Form,
        FormItem,
        DatePicker,
        Select,
        Option,
        Card,
        Tabs,
        TabPane
    },
    data() {
        return {
            namespace: namespace,
            isDisabledloadBtn: false /** 控制加载更多按钮 **/,
            currentPage: 1 /** 用来控制加载更新 **/,
            batchData: [] /** 多选选中 */,
            isClear: true,
            loading: true,
            searchModule: {
                dataTime: [],
                verificationTime: [],
                rectifyTime: []
            }, //查询条件：
            selectSource: [] /** 商品类型 */,
            selectException: [
                {
                    key: '1',
                    value: "异常"
                },
                {
                    key: '0',
                    value: "正常"
                }
            ] /** 异常状态 */,
            columns: [
                {
                    type: "selection",
                    align: "center",
                    // fixed: "left",
                    minWidth: 55
                },
                {
                    title: "序号",
                    type: "index",
                    align: "center",
                    // fixed: "left",
                    minWidth: 80
                },
                {
                    title: "子订单号",
                    key: "subOrderId",
                    align: "center",
                    // fixed: "left",
                    minWidth: 180
                },
                {
                    title: "主订单号",
                    key: "orderId",
                    align: "center",
                    minWidth: 200
                },
                {
                    title: "商品名称",
                    key: "productName",
                    align: "center",
                    minWidth: 210
                },
                {
                    title: "商品编码",
                    key: "productCode",
                    align: "center",
                    minWidth: 270
                },
                {
                    title: "商品类型",
                    key: "orderSourceCn",
                    align: "center",
                    minWidth: 100
                },
                {
                    title: "商户名称",
                    key: "merchantName",
                    align: "center",
                    minWidth: 210
                },
                {
                    title: "商户编码",
                    key: "merchantCode",
                    align: "center",
                    minWidth: 280
                },
                {
                    title: "清分渠道",
                    key: "payChannelCodeCn",
                    align: "center",
                    minWidth: 100
                },
                {
                    title: "清分金额(元)",
                    key: "clearAmount",
                    align: "center",
                    minWidth: 120,
                    render: (h, params) => {
                        let item = params.row.clearAmount / 100;
                        return h("span", util.toMoney(item));
                    }
                },
                {
                    title: "异常金额(元)",
                    key: "errorAmount",
                    align: "center",
                    minWidth: 120,
                    render: (h, params) => {
                        let item = params.row.errorAmount / 100;
                        return h("span", util.toMoney(item));
                    }
                },
                {
                    title: "异常原因",
                    key: "errorRemark",
                    align: "center",
                    minWidth: 200,
                    render: (h, params) => {
                        return h('span', params.row.errorRemark || '无')
                    }
                },
                {
                    title: "交易日期",
                    key: "payTime",
                    align: "center",
                    minWidth: 150
                },
                {
                    title: "核销日期",
                    key: "verifiedTime",
                    align: "center",
                    minWidth: 150
                },
                {
                    title: "清分时间",
                    key: "bankClearDate",
                    align: "center",
                    minWidth: 150
                },
                {
                    title: "对账时间",
                    key: "completeDate",
                    align: "center",
                    minWidth: 150
                },
                {
                    title: "操作",
                    key: "action",
                    align: "center",
                    // fixed: "right",
                    permissions: ["trade:settlement:cmb"],
                    minWidth: 150,
                    render: function(h, data) {
                        return h(Action, {
                            props: {
                                row: data.row
                            }
                        });
                    }
                }
            ]
        };
    },
    created() {
        this.$store.commit(`${namespace}/reviseQuery`);
        this.getKey();

    },
    methods: {
        /** 列表选择 **/
        getListChecked(data) {
            this.batchData = data;
        },
        /**
         *  导出当前页
         */
        exportExcelAll () {
            let dataList = this.$store.state[namespace].pageInfo.list;
            if (dataList.length) {
                let tables = this.$refs.tableData.getTables();
                tables.exportCsv({
                    filename: "成功对账单全部导出",
                    original: false,
                    columns: this.columns.filter(
                        (col, index) =>
                            index > 1 && index < this.columns.length - 1
                    ),
                    data: dataList.map(item => {
                        return {
                            subOrderId: item.subOrderId ? "\t" + item.subOrderId : "",
                            orderId: item.orderId ? "\t" + item.orderId : "",
                            merchantName: item.merchantName ? "\t" + item.merchantName : "",
                            merchantCode: item.merchantCode ? "\t" + item.merchantCode : "",
                            orderSourceCn: item.orderSourceCn ? "\t" + item.orderSourceCn : "",
                            productName: item.productName ? "\t" + item.productName : "",
                            productCode: item.productCode ? "\t" + item.productCode : "",
                            payChannelCodeCn: item.payChannelCodeCn ? "\t" + item.payChannelCodeCn : "",
                            clearAmount: item.clearAmount ? "\t" + item.clearAmount / 100 : "0",
                            errorAmount: item.errorAmount ? "\t" + item.errorAmount / 100 : "0",
                            errorRemark: item.errorRemark ? "\t" + item.errorRemark : "无",
                            payTime: item.payTime ? "\t" + item.payTime : "",
                            verifiedTime: item.verifiedTime ? "\t" + item.verifiedTime : "",
                            bankClearDate: item.bankClearDate ? "\t" + item.bankClearDate : "",
                            completeDate: item.completeDate ? "\t" + item.completeDate : ""
                        };
                    })
                });
            }
        },

        /** 本地导出 */
        exportExcel() {
            if (this.batchData.length) {
                let tables = this.$refs.tableData.getTables();
                tables.exportCsv({
                    filename: "成功对账单",
                    original: false,
                    columns: this.columns.filter(
                        (col, index) =>
                            index > 1 && index < this.columns.length - 1
                    ),
                    data: this.batchData.map(item => {
                        return {
                            subOrderId: item.subOrderId ? "\t" + item.subOrderId : "",
                            orderId: item.orderId ? "\t" + item.orderId : "",
                            merchantName: item.merchantName ? "\t" + item.merchantName : "",
                            merchantCode: item.merchantCode ? "\t" + item.merchantCode : "",
                            orderSourceCn: item.orderSourceCn ? "\t" + item.orderSourceCn : "",
                            productName: item.productName ? "\t" + item.productName : "",
                            productCode: item.productCode ? "\t" + item.productCode : "",
                            payChannelCodeCn: item.payChannelCodeCn ? "\t" + item.payChannelCodeCn : "",
                            clearAmount: item.clearAmount ? "\t" + item.clearAmount / 100 : "0",
                            errorAmount: item.errorAmount ? "\t" + item.errorAmount / 100 : "0",
                            errorRemark: item.errorRemark ? "\t" + item.errorRemark : "无",
                            payTime: item.payTime ? "\t" + item.payTime : "",
                            verifiedTime: item.verifiedTime ? "\t" + item.verifiedTime : "",
                            bankClearDate: item.bankClearDate ? "\t" + item.bankClearDate : "",
                            completeDate: item.completeDate ? "\t" + item.completeDate : ""
                        };
                    })
                });
            } else {
                this.$Message.warning("请勾选");
            }
        },
        /** 字典 - 商品类型 */
        getKey() {
            this.$store
                .dispatch(`${namespace}/getMerchantSearchKey`)
                .then(res => {
                    if (res.data.errorCode === 0) {
                        let data = res.data.data;
                        this.selectSource = data.orderSource; // 商品类型
                    }
                });
        },
        // 交易时间
        searchTime(date, type) {
            this.searchModule.payTimeBegin = date ? date[0] : "";
            this.searchModule.payTimeEnd = date ? date[1] : "";
        },
        // 核销时间
        searchVerificationTime(date, type) {
            this.searchModule.verifiedTimeBegin = date ? date[0] : "";
            this.searchModule.verifiedTimeEnd = date ? date[1] : "";
        },
        // 应清出时间
        searchRectifyTime(date, type) {
            this.searchModule.bankClearDateBegin = date ? date[0] : "";
            this.searchModule.bankClearDateEnd = date ? date[1] : "";
        },
        // 对账时间
        searchRectify(date, type) {
            this.searchModule.shouldBillDateBegin = date ? date[0] : "";
            this.searchModule.shouldBillDateEnd = date ? date[1] : "";
        },
        handleSearch() {
            let page = {
                currentPage: 1,
                pageSize: 50
            };
            this.$store.dispatch(`${namespace}/query`, {
                ...this.searchModule,
                ...page
            });
        },
        onSortChange(sort) {
            if (sort.order === "normal") {
                this.queryParam.order = [];
            } else {
                this.queryParam.order = [sort.key + " " + sort.order];
            }
            this.handleSearch();
        },
        // 清空事件；
        resetForm() {
            this.$set(this.searchModule, "subOrderId", "");
            this.$set(this.searchModule, "orderId", "");
            this.$set(this.searchModule, "merchantName", "");
            this.$set(this.searchModule, "orderSource", "");
            this.$set(this.searchModule, "orderSource", "");
            this.$set(this.searchModule, "isException", "");
            // 清空时间选择
            this.$refs["createDatePicker1"].handleClear();
            this.$refs["createDatePicker2"].handleClear();
            this.$refs["createDatePicker3"].handleClear();
            this.$refs["createDatePicker4"].handleClear();
        },
        /** 加载更多 **/
        async loadMore() {
            try {
                this.isDisabledloadBtn = true; // 每次请求都禁止按钮点击
                let obj = {
                    currentPage: ++this.currentPage,
                    pageSize: 50
                };
                let res = await this.$store.dispatch(
                    `${namespace}/getMoreList`,
                    { ...this.searchModule, ...obj }
                );

                let listData = res.data.data.list;
                if (listData.length != 0) {
                    this.$store.commit(`${namespace}/pushDataToList`, listData);
                } else {
                    --this.currentPage;
                    this.$Message.info({
                        content: "没有更多数据了！"
                    });
                }
                this.isDisabledloadBtn = false;
            } catch (error) {
                this.$Message.error({
                    content: error
                });
            }
        }
    },
    async mounted() {
        setTimeout(() => {
            this.loading = false;
        }, 1000);
    }
};
</script>

<style lang="less" scoped>
.succees {
    .timeWidth {
        width: 100%;
    }
    .loadMoreBtn {
        margin-top: 20px;
        text-align: center;
    }
}
</style>
